import { Box, Flex } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import LoginForm from "./components/LoginForm/LoginForm";


export enum LoginPageTypeEnum {
    passwordLogin = 'passwordLogin',
}

const Login = ()=>{
    const [pageType, setPageType] = useState<`${LoginPageTypeEnum}`>(LoginPageTypeEnum.passwordLogin);
   
    useEffect(()=>{
        setPageType(LoginPageTypeEnum.passwordLogin)
    })
    const loginSuccess = ()=>{
        setPageType(LoginPageTypeEnum.passwordLogin)
    }
    function DynamicComponent({ type }: { type: `${LoginPageTypeEnum}` }) {
      const TypeMap = {
        [LoginPageTypeEnum.passwordLogin]: LoginForm,
        // [LoginPageTypeEnum.register]: RegisterForm,
        // [LoginPageTypeEnum.forgetPassword]: ForgetPasswordForm,
        // [LoginPageTypeEnum.wechat]: WechatForm
      };
      const Component = TypeMap[type];
      return <Component setPageType={setPageType} loginSuccess={loginSuccess} />;
    }
    return (
      <>
        <Box
          display="flex"
          justifyContent="center"
          alignItems="center"
          backgroundColor="gray.100"
          width="100vw"
          height="100vh"
        >
          <DynamicComponent type={pageType}></DynamicComponent>
        </Box>
      </>
    )
}

export default Login;